import { CloseOutlined } from '@ant-design/icons'
import { styled, useModel } from '@umijs/max'

interface CloseTabProps {
  label: string
  tabKey: string
}

const Container = styled.div`
  display: flex;
  gap: 8px;
`

const CloseTab: React.FC<CloseTabProps> = ({label, tabKey}) => {
  const { removeTab } = useModel('global')

  const onRemoveTab = (e: Event) => {
    e.stopPropagation()
    removeTab(tabKey)
  }

  return (
    <Container>
      <span>{ sessionStorage.getItem(`__${tabKey}_title`) || label} </span>
      <CloseOutlined
        onClick={onRemoveTab as any}
        style={{
          fontSize: 10,
          color: '#c3c3c3',
        }}
      />
    </Container>
  )
}

export default CloseTab